<template id='asidebar'>
  <div class="sidebar"
       :style="{top:marginTop}">
    <el-menu class="siderbar-el-menu"
             :default-active="$router.page"
             background-color="#ffffffbb"
             router>
      <el-menu-item index="/home/write">
        <template slot="title">
          <img class="icon"
               src="@/assets/auto.png">
          <span>工时填写</span>
        </template>
      </el-menu-item>
      <el-menu-item v-if="this.$store.state.rights"
                    index="/home/people">
        <template slot="title">
          <img class="icon"
               src="@/assets/people.png">
          <span>人员管理</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/home/manage">
        <template slot="title">
          <img class="icon"
               src="@/assets/editor.png">
          <span>项目管理</span>
        </template>
      </el-menu-item>
      <el-submenu index="3">
        <template slot="title">
          <img class="icon"
               src="@/assets/browse.png">
          <span>数据汇总</span>
        </template>
        <el-menu-item index="/home/project">
          项目数据
        </el-menu-item>
        <el-menu-item index="/home/person">
          个人数据
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  props: {
    marginTop: {
      type: String,
      defalut: "70px"
    }
  },
  data() {
    return {};
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
    // changePage(department, type) {
    //   this.$store.dispatch("changeType",{
    //     index:department,
    //     type:type
    //   })
    // }
  },
  computed: {}
};
</script>

<style lang="less" scoped>
.sidebar {
  width: 200px;
  position: fixed;
  left: 0;
  bottom: 0;
  overflow-y: scroll;
  text-align: left;
}
.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar > ul {
  height: 100%; /*写给不支持calc()的浏览器*/
  height: calc(100%);
}
.el-menu {
  border-right: 1px solid #ffffff77;
  border-top: 1px solid #ffffff77;
}
.icon {
  width: 20px;
  height: 20px;
}
</style>
